<template>
  <view class="family-shrine">
    <!-- 顶部图片 -->
    <view class="shrine-header">
      <image class="shrine-image" src="/static/banner/shrine.png" mode="aspectFill" />
      <view class="shrine-title">
        <text>李氏宗祠</text>
      </view>
    </view>

    <!-- 基本统计数据 -->
    <view class="shrine-stats">
      <view class="stats-item">
        <text class="stats-value">500</text>
        <text class="stats-label">宗祠历史(年)</text>
      </view>
      <view class="stats-item">
        <text class="stats-value">2000</text>
        <text class="stats-label">占地面积(m²)</text>
      </view>
      <view class="stats-item">
        <text class="stats-value">12</text>
        <text class="stats-label">年度活动</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="shrine-content">
      <!-- 宗祠介绍 -->
      <view class="content-section">
        <view class="section-header">
          <view class="section-title">宗祠简介</view>
        </view>
        <view class="intro-content">
          <view class="intro-text">
            李氏宗祠始建于明朝嘉靖年间，距今已有近五百年历史。宗祠坐北朝南，占地面积约2000平方米，是我国南方地区保存较为完好的古代宗祠建筑之一。
          </view>
          <view class="intro-text mt-2">
            宗祠建筑为典型的三进四合院布局，主体建筑为三开间硬山顶式，檐下施斗拱，梁架结构精巧，雕刻精美，具有很高的历史、艺术和科学价值。
          </view>
          <view class="image-grid mt-3">
            <image
              class="grid-image"
              src="https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/bcc4123c1a9244b680206199766526ee.png"
              mode="aspectFill"
              @click="previewImage('https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/bcc4123c1a9244b680206199766526ee.png')"
            />
            <image
              class="grid-image"
              src="https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/bcc4123c1a9244b680206199766526ee.png"
              mode="aspectFill"
              @click="previewImage('https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/bcc4123c1a9244b680206199766526ee.png')"
            />
            <image
              class="grid-image"
              src="/static/shrine/shrine3.png"
              mode="aspectFill"
              @click="previewImage('/static/shrine/shrine3.png')"
            />
          </view>
        </view>
      </view>

      <!-- 历史渊源 -->
      <view class="content-section">
        <view class="section-header">
          <view class="section-title">历史渊源</view>
          <view class="section-more" @click="viewMore('history')">更多历史</view>
        </view>
        <view class="history-content">
          <view v-for="(item, index) in historyList" :key="index" class="time-line">
            <view class="time-point"></view>
            <view class="time-content">
              <view class="time-year">{{ item.year }}</view>
              <view class="time-desc">{{ item.content }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 全部宗祠 -->
      <view class="content-section">
        <view class="section-header">
          <view class="section-title">全部宗祠</view>
          <view class="section-more" @click="viewMore('list')">查看全部</view>
        </view>
        <view class="temple-list-preview">
          <view class="temple-preview-item" @click="viewMore('list')">
            <image class="preview-image" src="/static/banner/shrine.png" mode="aspectFill" />
            <view class="preview-info">
              <view class="preview-name">查看更多宗祠</view>
              <view class="preview-desc">点击查看全国各地李氏宗祠</view>
            </view>
            <view class="preview-arrow">›</view>
          </view>
        </view>
      </view>

      <!-- 联系我们 -->
      <view class="content-section">
        <view class="section-header">
          <view class="section-title">联系我们</view>
        </view>
        <view class="contact-content">
          <view class="contact-info">
            <view class="contact-item">
              <text class="contact-label">地址：</text>
              <text class="contact-value">福建省泉州市晋江市安海镇李氏宗祠</text>
            </view>
            <view class="contact-item">
              <text class="contact-label">电话：</text>
              <text class="contact-value">0595-88123456</text>
            </view>
            <view class="contact-item">
              <text class="contact-label">开放时间：</text>
              <text class="contact-value">每日 8:30-17:00（节假日不休）</text>
            </view>
          </view>
          <view class="map-container mt-3">
            <map
              class="map"
              :latitude="24.7162"
              :longitude="118.4856"
              :markers="markers"
              scale="16"
            ></map>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 历史渊源数据
const historyList = ref([
  {
    year: "1522年",
    content: "李氏宗祠始建于明朝嘉靖年间，由李姓先祖李德华主持修建。",
  },
  {
    year: "1689年",
    content: "清康熙年间，宗祠进行第一次大规模修缮，扩建为现在的规模。",
  },
  {
    year: "1911年",
    content: "辛亥革命后，宗祠曾短暂用作地方学堂。",
  },
  {
    year: "1982年",
    content: "被列为省级文物保护单位。",
  },
  {
    year: "2008年",
    content: "进行现代化保护修缮工程，恢复古建筑原貌。",
  },
  {
    year: "2018年",
    content: '被评为"全国优秀传统文化传承基地"。',
  },
]);

// 地图标记点
const markers = ref([
  {
    id: 1,
    latitude: 24.7162,
    longitude: 118.4856,
    title: "李氏宗祠",
    iconPath: "/static/icons/location.png",
    width: 30,
    height: 30,
  },
]);

// 图片预览
const previewImage = (url: string) => {
  uni.previewImage({
    urls: [
      "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/bcc4123c1a9244b680206199766526ee.png",
      "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/bcc4123c1a9244b680206199766526ee.png",
      "/static/shrine/shrine3.png",
    ],
    current: url,
  });
};

// 查看更多
const viewMore = (type: string) => {
  uni.navigateTo({
    url: `/pages/work/family/${type}`,
  });
};
</script>

<style lang="scss">
.family-shrine {
  background-color: #f7f7f7;
  min-height: 100vh;
  padding: 0;
  padding-bottom: 30rpx;
}

.shrine-header {
  position: relative;
  height: 400rpx;
  overflow: hidden;
}

.shrine-image {
  width: 100%;
  height: 100%;
}

.shrine-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30rpx;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);

  text {
    color: #fff;
    font-size: 44rpx;
    font-weight: bold;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  }
}

.shrine-stats {
  display: flex;
  justify-content: space-around;
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  .stats-item {
    text-align: center;

    .stats-value {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #1989fa;
      margin-bottom: 10rpx;
    }

    .stats-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.shrine-content {
  padding: 0;
}

.content-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .section-more {
      font-size: 26rpx;
      color: #1989fa;
    }
  }
}

.intro-content {
  .intro-text {
    font-size: 28rpx;
    line-height: 1.8;
    color: #333;
    text-align: justify;
  }

  .image-grid {
    display: flex;
    justify-content: space-between;

    .grid-image {
      width: 220rpx;
      height: 160rpx;
      border-radius: 8rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }
  }
}

.history-content {
  .time-line {
    position: relative;
    display: flex;
    padding: 16rpx 0;

    &:not(:last-child) {
      &::before {
        content: "";
        position: absolute;
        left: 10rpx;
        top: 40rpx;
        bottom: 0;
        width: 2rpx;
        background-color: #ddd;
      }
    }
  }

  .time-point {
    position: relative;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #1989fa;
    margin-right: 20rpx;
    margin-top: 14rpx;
  }

  .time-content {
    flex: 1;
  }

  .time-year {
    font-size: 32rpx;
    font-weight: bold;
    color: #1989fa;
    margin-bottom: 8rpx;
  }

  .time-desc {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }
}

.temple-list-preview {
  margin-top: 20rpx;

  .temple-preview-item {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    padding: 20rpx;
    border-radius: 12rpx;
    position: relative;

    .preview-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }

    .preview-info {
      flex: 1;
    }

    .preview-name {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .preview-desc {
      font-size: 26rpx;
      color: #666;
    }

    .preview-arrow {
      font-size: 40rpx;
      color: #ccc;
      margin-right: 10rpx;
    }
  }
}

.contact-content {
  .contact-info {
    margin-bottom: 20rpx;
  }

  .contact-item {
    margin-bottom: 16rpx;
    font-size: 28rpx;
    display: flex;

    .contact-label {
      color: #666;
      width: 140rpx;
      flex-shrink: 0;
    }

    .contact-value {
      color: #333;
      flex: 1;
    }
  }

  .map-container {
    height: 400rpx;
    border-radius: 8rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

    .map {
      width: 100%;
      height: 100%;
    }
  }
}

.mt-2 {
  margin-top: 20rpx;
}

.mt-3 {
  margin-top: 30rpx;
}
</style>
